<template>
  <div>
    <div>
      <el-form v-if="Show" :inline="true">
        <el-form-item label="卷号">
          <coilNextPreCal ref="coilNextPre" :mat-no="matNo" @search="CoilSeach"/>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="search">
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <el-radio-group v-model="radio" @change="radioData">
        <el-radio :label="'ys'">屈服</el-radio>
        <el-radio :label="'ts'">抗拉</el-radio>
        <el-radio :label="'el'">延伸</el-radio>
      </el-radio-group>
      <div id="heat" :style="{width: '100%', height: 'calc(100vh - 220px)'}"/>
    </div>
  </div>
</template>

<script>
import BaseSearch from "@/components/BaseSearch";
import coilNextPreCal from "@/components/coilNextPrePltcm";
import themeEcharts from "@/assets/css/themeEcharts";
import { post } from "@/lib/Util";
import _ from "lodash";

export default {
  name: "IndHide",
  components: {
    BaseSearch,
    coilNextPreCal
  },
  props: {
    /* sootList: {
      type: Object,
      default: null
    },*/
    info_mat_no: {
      type: String,
      default: ""
    },
    Show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      matNo: "",
      sootListdata: {},
      radio: "ys",
      Axis: [],
      isEcarts: false,
      length: "",
      width: ""
    };
  },
  watch: {
    info_mat_no: {
      handler(title) {
        this.matNo = this.info_mat_no;
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy() {
    /* if (this.isEcarts) {
      const dcharts = this.$echarts.getInstanceByDom(document.getElementById('heat'))
      if (dcharts) {
        this.$echarts.dispose(dcharts)
      }
    }*/
  },
  mounted() {
    // localStorage.setItem('sootListdata', JSON.stringify(this.sootListdata))// 保存数据
    // localStorage.getItem('sootListdata')// 读取数据
    // console.log(JSON.parse(localStorage.getItem('sootListdata')))
  },
  methods: {
    // 查询工艺分布数据
    async findMppMap(info_mat_no) {
      console.log("运行2");
      if (info_mat_no === "") {
        info_mat_no = this.$refs.coilNextPre.getMatNo();
      }
      this.length = 200;
      this.width = 20;
      this.$emit("resData", this.length, this.width, info_mat_no);
      const mockData = await post(this.urlApi.mppCalforceAnalysisGraph, {
        info_mat_no: info_mat_no
      });
      console.log(mockData, info_mat_no, "mockData");
      const serData = [];
      const sootList = {};
      const xData = [];
      for (var i = 0; i < 1; i++) {
        xData.push(i);
      }
      mockData.wPosition = xData;
      if (this.radio === "ys") {
        mockData.lPosition = mockData.ys.xData;
        mockData.ys.yData.map((item, index) => {
          xData.map((item2, index2) => {
            serData.push([item2, index, item]);
          });
        });
      } else if (this.radio === "ts") {
        mockData.lPosition = mockData.ts.xData;
        mockData.ts.yData.map((item, index) => {
          xData.map((item2, index2) => {
            serData.push([item2, index, item]);
          });
        });
      } else if (this.radio === "el") {
        mockData.lPosition = mockData.el.xData;
        mockData.el.yData.map((item, index) => {
          xData.map((item2, index2) => {
            serData.push([item2, index, item]);
          });
        });
      }

      sootList.xAxis = mockData.wPosition;
      sootList.yAxis = mockData.lPosition;
      sootList.seriesData = serData;
      this.sootListdata = sootList;
      this.$nextTick(() => {
        this.heat();
      });
    },
    // 屈服抗拉选项
    radioData() {
      console.log("radio选项", this.radio, this.matNo);
      this.findMppMap(this.matNo, this.radio);
    },
    CoilSeach(matNo) {
      this.$emit("queryBtn", matNo);
      this.matNo = matNo;
      // this.findMppMap(this.info_mat_no, this.radio)
    },
    search() {
      // 搜索条件改变时
      const info_mat_no = this.$refs.coilNextPre.getMatNo();
      this.matNo = info_mat_no;
      this.findMppMap(this.matNo);
    },
    // 所属业务
    heat() {
      console.log("云图数据渲染");
      if (this.sootListdata.seriesData === undefined) {
        return false;
      }
      this.isEcarts = true;
      let Chart = this.$echarts.getInstanceByDom(
        document.getElementById("heat")
      );
      if (!Chart) {
        Chart = this.$echarts.init(
          document.getElementById("heat"),
          themeEcharts
        );
        this.$once("hook:beforeDestroy", () => {
          this.$echarts.dispose(Chart);
        });
        Chart.on("click", params => {
          console.log("云图点击1");
          const wData = this.sootListdata.xAxis[params.value[0]];
          const lData = this.sootListdata.yAxis[params.value[1]];
          this.$emit("PointResults", [wData, lData]); // 页面刷新this.findPointData()
          Chart.setOption({
            series: [
              {
                markLine: {
                  symbol: "none",
                  label: {
                    show: false
                  },
                  lineStyle: {
                    width: 3,
                    type: "solid",
                    color: "black"
                  },
                  data: [
                    {
                      name: "某个坐标",
                      yAxis: params.value[1],
                      value: "标记1"
                    }
                    /* {
                      name: '某个坐标',
                      xAxis: params.value[0],
                      value: '标记1'
                    }*/
                  ]
                }
              }
            ]
          });
        });
      }
      if (this.sootListdata.seriesData.length === 0) {
        Chart.setOption({
          animation: false,
          grid: {
            left: 0,
            right: 30,
            top: 20,
            bottom: 50,
            containLabel: true
          },
          xAxis: {
            type: "category",
            axisLabel: { show: false },
            data: [],
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: "category",
            data: []
          },
          series: [
            {
              name: "Punch Card",
              type: "heatmap",
              data: []
            }
          ],
          visualMap: {
            min: "",
            max: "",
            calculable: true,
            orient: "horizontal",
            left: "center",
            bottom: "0%",
            realtime: false,
            inRange: {
              color: [
                "#0071ff",
                "#00ffc4",
                "#aaff00",
                "#ffe400",
                "#ff7200",
                "#ff4400"
              ]
            }
          }
        });
      } else {
        const minMax = _.sortBy(
          JSON.parse(JSON.stringify(this.sootListdata.seriesData)),
          [2]
        );
        const min = minMax[0][2];
        const max = minMax[minMax.length - 1][2];
        // const xIndex = parseInt(this.sootListdata.xAxis.length / 4)
        const yIndex = 200;
        // const xData = this.sootListdata.xAxis[xIndex]
        // const yData = this.sootListdata.yAxis[yIndex]

        var radioMppLabel = {
          ys: "屈服",
          ts: "抗拉",
          el: "延伸"
        };
        var vm = this;
        Chart.setOption({
          tooltip: {
            position: "top",
            formatter: function(params) {
              if (params.componentSubType === "heatmap") {
                let valData = params.value;
                if (typeof valData === "string") {
                  valData = params.value.split("，");
                }
                var relVal =
                  "长度方向：" +
                  vm.sootListdata.yAxis[valData[1]] +
                  "<br/>" +
                  radioMppLabel[vm.radio] +
                  "：" +
                  valData[2].toFixed(2);
                return relVal;
              }
            }
          },
          animation: false,
          grid: {
            left: 0,
            right: 30,
            top: 20,
            bottom: 50,
            containLabel: true
          },
          xAxis: {
            type: "category",
            axisLabel: { show: false },
            data: this.sootListdata.xAxis,
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: "category",
            data: this.sootListdata.yAxis
          },
          visualMap: {
            min: min,
            max: max,
            calculable: true,
            orient: "horizontal",
            left: "center",
            bottom: "0%",
            realtime: false,
            inRange: {
              color: [
                "#0071ff",
                "#00ffc4",
                "#aaff00",
                "#ffe400",
                "#ff7200",
                "#ff4400"
              ]
            }
          },
          series: [
            {
              name: "Punch Card",
              type: "heatmap",
              data: this.sootListdata.seriesData,
              emphasis: {
                itemStyle: {
                  borderColor: "#333",
                  borderWidth: 1
                }
              },
              /* markPoint: {
                symbolSize: 70,
                data: [
                  {
                    name: '当前位置',
                    yAxis: yIndex,
                    xAxis: xIndex,
                    value: [yData, xData],
                    label: {
                      show: true,
                      formatter: '{c}'
                    }
                  }
                ]
              },*/
              markLine: {
                symbol: "none",
                lineStyle: {
                  width: 3,
                  type: "solid",
                  color: "black"
                },
                position: "middle",
                data: [
                  {
                    name: "某个坐标",
                    yAxis: yIndex,
                    value: "标记1"
                  }
                  /* {
                    name: '某个坐标',
                    xAxis: xIndex,
                    value: '标记1'
                  }*/
                ]
              },
              progressive: 1000,
              animation: false
            }
          ]
        });
      }
    }
  }
};
</script>

<style scoped>
/deep/ .el-radio {
  margin-right: 7px;
}

/deep/ .el-input-group__append {
  padding: 0px;
}

/deep/ .el-input-group__prepend {
  padding: 0px;
}
</style>
<style>
.xw_inputPreNext .xw_divBtn {
  width: 21px;
}
</style>
